@import "compass/css3";
.nav-type{
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
	width:100%;
	background:#fff;
	position:fixed;
	top:65px;
	left:0;
	z-index:5;
	.nav{
		width:1000px;
		margin:auto;
		.span1{
			text-align:center;
			padding:10px 0;
			&>div{
				width:90%;
				height:30px;
				line-height: 30px;
				margin:auto;
				border: 1px solid #d3d3d3;
				@include border-radius(5px);
				&:hover{
					background: #53B856;
					color:#fff;
					cursor:pointer;
				}
			}
		}
		.head-kind{
			&>div{
				border:none;
				font-weight: 700;
				font-size:16px;
				&:hover{
					background: #F8F9F9;
					color: #333;
					cursor:auto;
				}
			}
		}
	}
}
#kinds{
	margin:150px auto;
	width:1000px;
	h3{
		width:100%;
		text-align: center;
		padding:20px 0;
	  	font-size: 24px;
	  	color: #444;
	  	font-weight: 400;

	}
	.kind-per{
		width:100%;
		margin:20px auto;
		padding:20px;
		background:#fff;
		@include border-radius(10px);
		.book{
			float:left;
			width:16.666666%;
			margin-bottom: 20px;
			text-align:center;
			position:relative;
			.book-img{
				padding: 1px;
			  	width: 132px;
			  	height: 176px;
			  	border:solid 2px #d7d7d7;
			  	@include border-radius(10px);
			}
			.book-name{
				margin:10px auto;
				line-height: 20px;
				height:40px;
				overflow: hidden;
				width:82%;
				text-align: left;
			}
			.free-info{
				margin:auto;
				width:82%;
				font-size: 12px;
				.book-prize{
					color: #666;
					float:left;
				}
				.time-free{
					color:#FB5E57;
					float:right;
					text-decoration: none;
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}
}

.read-detail{
	position:absolute;
	left:167px;
	top:-10px;
	z-index:5;
	width:315px;
	background:#fff;
	padding-top:20px;
	border:solid 1px #d7d7d7;
	.arrowLeft{
		position:absolute;
		left:-30px;
		top:100px;
		.arrow1{
			position:absolute;
			left:0;
			top:0;
			border-width:15px;
			border-style:solid;
			border-color:transparent #d7d7d7 transparent transparent;
		}
		.arrow2{
			position:absolute;
			left:1px;
			top:0;
			border-width:15px;
			border-style:solid;
			border-color:transparent #fff transparent transparent;
		}
	}
	.arrowRight{
		position:absolute;
		right:-30px;
		top:100px;
		.arrow1{
			position:absolute;
			right:0;
			top:0;
			border-width:15px;
			border-style:solid;
			border-color:transparent transparent transparent #d7d7d7;
		}
		.arrow2{
			position:absolute;
			right:1px;
			top:0;
			border-width:15px;
			border-style:solid;
			border-color:transparent transparent transparent #fff;
		}
	}
	h4{
		width:86%;
		margin:auto;
		font-size:18px;
		font-weight: 700;
		height:50px;
		line-height:25px;
	}
	.auth{
		width:86%;
		margin:auto;
		font-size:14px;
		color:#999;
		margin-bottom: 5px;
	}
	.intro{
		width:86%;
		margin:auto;
		font-size:15px;
		line-height: 20px;
	}
	.prize-info{
		width:86%;
		margin:auto;
		font-size:15px;
		line-height: 35px;
	}
	.appendA{
		// position:absolute;
		// top:50px;
		// left:0;
		// z-index:100;
		display: block;
		width:100px;
		height:30px;
		font-size:15px;
		color:#fff;
		margin:0 0 15px 7%;
		text-decoration: none;
		text-align: center;
		line-height: 30px;
		background: #1C9A65;
		@include border-radius(2px);
		@include box-shadow(0 0 2px #999);
		// &:hover{
		// 	border:solid red 1px;
		// }
	}
}
.up{
	width:60px;
	height:72px;
	background:#999;
	@include border-radius(5px);
	@include box-shadow(0 1px 0 #333);
	&:hover{
		@include box-shadow(0 3px 0 #333);
	}
	.innerUp{
		width:40px;
		height:52px;
		margin:10px auto;
		position:relative;
		.arrow1{
			position:absolute;
			top:0;
			left:0;
			border-width:0 20px 40px;
			border-style:solid;
			border-color:transparent transparent #fff transparent;
				
		}
		.arrow2{
			position:absolute;
			top:40px;
			left:14px;
			width:12px;
			height:12px;
			background:#fff;
		}
	}
	
}